<template>
  <div class="three-slide">
    <cube-slide  :data="dailyList" ref="dailySlide"  :interval="3500">
      <cube-slide-item  v-for="(itemList,index) in dailyList" :key="index"  >
        <div class="slide_item">
          <div class="item"  v-for="item in itemList" :key="item.id" @click="turn('/detail?id='+item.id)">
            <div class="img-wrap" :class="{'sel':type}">
              <img :src="imgH+item.img" alt="" class="img">
            </div>
            <div class="info"  :class="{'sel':type}">
              <div class="name" v-if="type">{{item.name}}</div>
              <div class="stock">
                <div class="block">
                  <div :style="{width:(((item.totalStock-item.stock)*100/item.totalStock).toFixed(0))+'%'}" class="red"></div>
                </div>
                <span class="num">已抢{{(((item.totalStock-item.stock)*100/item.totalStock).toFixed(0))}}%</span>
              </div>
              <div class="price">
                <span class="now"><span class="icon">￥</span>{{item.nowPrice}}</span>
                <div class="voucher" v-if="item.cashReward&&item.cashReward.split('_')[1]">
                  <div class="vst">赚</div>
                  <div class="money">{{item.cashReward.split('_')[1]}}元</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </cube-slide-item>
    </cube-slide>
  </div>
</template>

<script>
export default {
  data(){
    return {
      imgH: process.env.VUE_APP_IMG_DOMAIN,
    }
  },
  created() {
  },
  computed:{
    dailyList(){
      let tem = []
      let res = []
      for (let i = 0; i < this.list.length; i++) {
        tem.push(this.list[i])
        if(tem.length==3){
          res.push(tem.concat())
          tem = []
        }else if (i == this.list.length-1) { //最后了
          res.push(tem)
        }
      }
      return  res
    }
  },
  methods:{
    turn(url){
      this.$router.push(url)
    }
  },
  props:{
    list:Array,
    type:Number
  }
}
</script>

<style scoped lang="stylus">
/deep/ .cube-slide-dots
          span
            width: 5px;
            height: 3px;
            background linear-gradient(270deg, #FF7135, #FB3245)
            opacity 0.5
            border-radius 2px
            &.active
              width 7px;
              height 4px;
.three-slide
  width 100%
  .slide_item
    display flex
    padding-bottom 20px
    justify-content space-between
    flex 1
    .item
      display flex
      flex-direction column
      align-items center
      overflow hidden
      .img-wrap
        z-index 1
        overflow hidden
        border-radius 5px
        width 100px
        height 100px
        &.sel
          width 105px
          height 105px
        .img
          width: 100%;
      .info
        width 100px
        padding 10px 5px
        border-radius 5px
        margin-top -5px
        background-color white
        display flex
        align-items center
        justify-content space-between
        flex-direction column
        overflow hidden
        &.sel
          margin-top 0px
        .name
          width 100%
          color #333333
          font-size 12px
          white-space nowrap
          text-overflow ellipsis
          overflow hidden
        .stock
          width 100%
          margin 9px 0 9px 0
          display flex
          align-items center
          justify-content space-between
          .block
            overflow hidden
            background-color #EBEBEB
            height 4px
            border-radius 5px
            width 62px
            .red
              background-color   #FE4B38
              height 100%
          .num
            line-height 8px
            font-size 8px
            color: #929292;
        .price
          display flex
          justify-content space-between
          width 100%
          .now
            font-weight bold
            font-size 14px
            color #333333
            .icon
              font-size 9px
              font-weight bold
          .voucher
            font-size 9px
            color white
            display flex
            background-color #FE4B38
            text-align center
            line-height 15px
            border-radius 3px
            overflow hidden
            .vst
              height 15px
              padding 0 2px 0 4px
              border-right  2px white dotted
            .money
              height 15px
              padding 0 5px


</style>